<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">  
<link rel="stylesheet" href="css/lightbox.css">
<!-- //Custom Theme files -->
<!-- font-awesome icons -->
<link href="css/font-awesome.css" rel="stylesheet"> 
<!-- //font-awesome icons -->
<!-- js -->
<script src="js/jquery-2.2.3.min.js"></script>  
<script src="js/modernizr.js"></script> 
<!-- //js -->
<!--<link href='http://fonts.googleapis.com/css?family=Aref+Ruqaa:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>-->
</head>
<body>
	<div class="main"> 
		<!-- banner -->
		<div class="banner about-banner">
			<!-- header -->
			<div class="header">
				<div class="container">
					<div class="logo">
						<h1><a href="index.html">Snapshot</a></h1>
					</div> 
					<div class="logo-right">
						<p><i class="fa fa-phone" aria-hidden="true"> </i> 111 222 3333</p> 
					</div>  
					<div class="top-nav"> 
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<!-- //header -->
			<!-- banner-text -->
			<div class="about-banner-text"> 
				<div class="container">
					<ol class="breadcrumb">
						<li><a href="index.html">Home</a></li> 
						<li class="active">Gallery</li>
					</ol> 
				</div>
			</div>
			<!-- //banner-text -->
		</div>
		<!-- //banner -->  
		<!-- gallery -->
		<div class="gallery">
			<div class="container">
				<h3 class="w3ls-title">Our Gallery</h3> 
				<div class="gallery-info">
					<div class="col-md-8 gallery-grids">
						<div class="galry-text">
							<p>Lorem ipsum dolor sit amet onsectetur our best Florence make your day special, Our best Florence make your day special</p>
						</div>
						<div class="galry-grid glry-one">
							<div class="glry-two glry-left"> 
								<a href="images/img11.jpg" data-lightbox="example-set" data-title="Duis venenatis nisl id posuere dictum. Maecenas vitae accumsan est, id imperdiet libero. Quisque sit amet felis a nisl condimentum bibendum. Phasellus vitae egestas diam">
									<img src="images/img11.jpg" alt="" class="img-responsive zoom-img">
									<div class="w3agile-text">
										<h5>Best Snapshots</h5>
									</div>
								</a>
							</div>
							<div class="glry-two glry-right">
								<a href="images/img6.jpg" data-lightbox="example-set" data-title="In convallis libero quis orci condimentum, id congue ex eleifend accumsan est, id imperdiet libero Aenean viverra commodo nunc quis vestibulum.">
									<img src="images/img6.jpg" alt="" class="img-responsive zoom-img">
									<div class="w3agile-text w3agile-text-small">
										<h5>Best Snapshots</h5>
									</div>
								</a>
								<a class="w3ls-bottom-img" href="images/img9.jpg" data-lightbox="example-set" data-title="Phasellus suscipit ultrices metus, at pulvinar velit. Praesent eu lectus at ante viverra efficitur ac at sapien. Donec vel magna mollis faucibus velit. Quisque viverra nunc nulla.">
									<img src="images/img9.jpg" alt="" class="img-responsive zoom-img">
									<div class="w3agile-text w3agile-text-small">
										<h5>Best Snapshots</h5>
									</div>
								</a>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="galry-grid glly-bottm">
							<div class="glry-two glry-right">
								<a href="images/img5.jpg" data-lightbox="example-set" data-title="Nam id interdum turpis. Donec in purus sagittis, venenatis nulla non, rhoncus sapien. Nunc varius velit eget fermentum fermentum.">
									<img src="images/img5.jpg" alt="" class="img-responsive zoom-img">
									<div class="w3agile-text w3agile-text-small">
										<h5>Best Snapshots</h5>
									</div>
								</a>
								<a class="w3ls-bottom-img" href="images/img7.jpg" data-lightbox="example-set" data-title="Fusce laoreet ut magna eu egestas. Vivamus malesuada dui sed tortor gravida, at euismod turpis convallis.">
									<img src="images/img7.jpg" alt="" class="img-responsive zoom-img">
									<div class="w3agile-text w3agile-text-small">
										<h5>Best Snapshots</h5>
									</div>
								</a>
							</div>
							<div class="glry-two glry-left">
								<a href="images/img13.jpg" data-lightbox="example-set" data-title="Duis venenatis nisl id posuere dictum. Maecenas vitae accumsan est, id imperdiet libero. Quisque sit amet felis a nisl condimentum bibendum phasellus vitae egestas diam.">
									<img src="images/img13.jpg" alt="" class="img-responsive zoom-img">
									<div class="w3agile-text">
										<h5>Best Snapshots</h5>
									</div>
								</a>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class="col-md-4 gallery-grids">
						<div class="galry-grid grid-top-rgt">
							<a href="images/img8.jpg" data-lightbox="example-set" data-title="In convallis libero quis orci condimentum, id congue ex eleifend accumsan est, id imperdiet libero Aenean viverra commodo nunc quis vestibulum.">
								<img src="images/img8.jpg" alt="" class="img-responsive zoom-img">
								<div class="w3agile-text w3agile-text-small2">
									<h5>Best Snapshots</h5>
								</div>
							</a>
						</div>
						<div class="galry-grid grid-top-rgt galry-bottom-mdl">
							<a href="images/img12.jpg" data-lightbox="example-set" data-title="Phasellus suscipit ultrices metus, at pulvinar velit. Praesent eu lectus at ante viverra efficitur ac at sapien. Donec vel magna mollis">
								<img src="images/img12.jpg" alt="" class="img-responsive zoom-img">
								<div class="w3agile-text">
									<h5>Best Snapshots</h5>
								</div>
							</a>
						</div>
						<div class="galry-grid">
							<a href="images/img10.jpg" data-lightbox="example-set" data-title="Duis venenatis nisl id posuere dictum. Maecenas vitae accumsan est, id imperdiet libero. Quisque sit amet felis a nisl condimentum bibendum phasellus vitae egestas diam.">
								<img src="images/img10.jpg" alt="" class="img-responsive zoom-img">
								<div class="w3agile-text w3agile-text-small2">
									<h5>Best Snapshots</h5>
								</div>
							</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<script src="js/lightbox-plus-jquery.min.js"></script>
			</div>
		</div>			
		<!-- //gallery -->  
		<!-- footer -->
		<div class="footer">
			<div class="container">
				<h3><a href="index.html">Snapshot</a></h3>
				<p>Copyright &copy; 2016.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
				<div class="social-icons">
					<ul>
						<li><a href="#" class="fa fa-facebook icon icon-border facebook"> </a></li>
						<li><a href="#" class="fa fa-twitter icon icon-border twitter"> </a></li>
						<li><a href="#" class="fa fa-google-plus icon icon-border googleplus"> </a></li>
						<li><a href="#" class="fa fa-dribbble icon icon-border dribbble"> </a></li>
						<li><a href="#" class="fa fa-rss icon icon-border rss"> </a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- //footer -->	 
	</div> 
	<a href="#navi" class="navi-trigger"> <span class="navi-icon"> <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54"></svg> </span> </a> 
	<!-- Hidden Navi Menu -->
	<div id="navi" class="navi">
		<div class="navigation-wrapper">
			<div class="half-block">
				<h2>Navigation</h2>
				<nav>
					<ul class="primary-navi">
						<li><a href="index.html">Home</a></li>
						<li><a href="about.html">About</a></li>
						<li><a href="services.html">Services</a></li>
						<li><a href="codes.html">Short Codes</a></li>
						<li><a href="gallery.html" class="selected">Gallery</a></li>
						<li><a href="contact.html">Contact Us</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
	<script>
	jQuery(document).ready(function($){
		var isLateralNavAnimating = false;
		
		//open/close lateral navigation
		$('.navi-trigger').on('click', function(event){
			event.preventDefault();
			//stop if nav animation is running 
			if( !isLateralNavAnimating ) {
				if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true; 
				
				$('body').toggleClass('navigation-is-open');
				$('.navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
					//animation is over
					isLateralNavAnimating = false;
				});
			}
		});
	});
	</script>
	<!-- //Hidden Navi Menu -->  
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.js"></script>
</body>
</html>